<template>
  <div>

    <!--   面包屑导航条-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学生模块管理</el-breadcrumb-item>
      <el-breadcrumb-item>未上完的课时</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-table
        :data="classesList"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          width="120">
        </el-table-column>
        <el-table-column
          prop="classDate"
          label="上课日期"
          width="150">
          <template slot-scope="scope">
            {{scope.row.classDate|dateftl}}
          </template>
        </el-table-column>
        <el-table-column
          label="开始时间"
          width="150">
          <template slot-scope="scope">
            {{scope.row.beginTime}}
          </template>
        </el-table-column>
        <el-table-column
          prop="endTime"
          label="结束时间"
          width="150">
        </el-table-column>

        <el-table-column
          prop="classStatus"
          label="状态"
          width="150">
          <template slot-scope="scope">
            {{scope.row.classStatus|stidFit}}
          </template>
        </el-table-column>
        <el-table-column
          prop="classFee"
          label="课时费"
          width="150">
        </el-table-column>
        <el-table-column
          prop="sellerName"
          label="销售姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="studentName"
          label="学生姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="teacherName"
          label="教师姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="科目"
          width="150">
        </el-table-column>
      </el-table>

      <!--用于分页的插件-->
      <el-pagination
        :current-page="pageCurrent"
        :page-size="pageSize"
        :page-sizes="[2, 3, 5, 10]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: "NotFinishedClass",
    data(){
      return{
        classesList:[],
        pageCurrent:1,
        pageSize:2,
        total: 0,
        id:""
      }
    },
    methods:{
      getClasses:function (id) {
        this.$http.post("students/getWillClassByPage?userId="+id+"&pageCurrent="+this.pageCurrent+"&pageSize="+this.pageSize).then((res)=>{
          /*请求数据进行赋值渲染*/
          console.info(res);

          this.classesList = res.data.result.students.records;

          this.total = res.data.result.students.total;
        })
      },
      handleSizeChange: function (val) {
        /*将数据重新赋值，并且向后端发送请求*/
        this.pageSize = val;
        this.getClasses(this.id);
      },
      handleCurrentChange: function (val) {
        /*将数据重新赋值，并且向后端发送请求*/
        this.pageCurrent = val;
        this.getClasses(this.id);
      },
    },
    mounted() {
      this.id = this.$route.query.id;
      this.getClasses(this.id);
    },
    filters:{
      beginFit:function (val) {
        return moment(val).format("YYYY-DD-MM hh:mm:ss");
      },
      dateftl:function (val) {
        return moment(val).format("YYYY-DD-MM");
      },
      stidFit:function (val) {
        if (val==0){
          return "未上课";
        }else if (val==1){
          return "已上课";
        }else if (val==2){
          return "已删除";
        }
      }
    }
  }
</script>

<style  scoped>

</style>
